<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
 
    <h:head>  
        <title>Facelet Title</title>  
    </h:head>  
    <h:body>  
        Hello from Facelets  
        <h:form>  
            <p:tree value="#{documentsController.root}"  
                    dynamic="true"  
                    var="doc"  
                    cache="false"  
                    nodeSelectListener="#{documentsController.onNodeSelect}"  
                    nodeExpandListener="#{documentsController.onNodeExpand}"  
                    nodeCollapseListener="#{documentsController.onNodeCollapse}"  
                    update="selectedNode"  
                    >  
                <p:treeNode>  
                    <h:outputText value="#{doc}"/>  
                </p:treeNode>  
                <p:treeNode type="document" styleClass="documentStyle">  
                    <h:outputText value="#{doc}" styleClass="nodeContent"/>  
                </p:treeNode>  
                <p:treeNode type="picture" styleClass="pictureStyle">  
                    <h:outputText value="#{doc}" styleClass="nodeContent"/>  
                </p:treeNode>  
                <p:treeNode type="mp3" styleClass="mp3Style">  
                    <h:outputText value="#{doc}" styleClass="nodeContent"/>  
                </p:treeNode>  
            </p:tree>  
            
            <hr/>  
            
            <h:outputText id="selectedNode" value="You have selected: #{documentsController.selectedDocument.data}" />                       
                    
        </h:form>  
    </h:body>  
</html>